<template>
  <div :id="activeAlarm.id" class="container"></div>
</template>

<script>
import AMap from "AMap";
let map = null;
let marker = null;
export default {
  data() {
    return {};
  },
  props: {
    activeAlarm: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  created() {
  },
  mounted() {
    this.GaodeMap();
  },
  watch: {
    // activeAlarm: {  
    //   deep: true,
    //   handler: function(newV, oldV) {
    //     console.log(map,1);
    //     if (map) {
    //       this.GaodeMap();
    //     }
    //   },
    // },
  },
  methods: {
    GaodeMap() {
      map = new AMap.Map(this.activeAlarm.id, {
        center: [117.01811981201172, 36.05330276489258], // [纬度，经度]
        resizeEnable: true,
        zoom: 17,
      });
      AMap.plugin(["AMap.ToolBar", "AMap.Scale"], function() {
        map.addControl(new AMap.ToolBar());
        map.addControl(new AMap.Scale());
      });
      this.addMarker();
    },
    // 实例化点标记
    addMarker() {
      marker = new AMap.Marker({
        position: [this.activeAlarm.lon, this.activeAlarm.lat],
        offset: new AMap.Pixel(0, 30),
        map: map,
      });
      map.setFitView([marker]);
      // 设置鼠标划过点标记显示的文字提示
      //   marker.setTitle("我是marker的title");
      // 设置label标签
      // label默认蓝框白底左上角显示，样式className为：amap-marker-label
      marker.setLabel({
        direction: "top",
        offset: new AMap.Pixel(0, -5), //设置文本标注偏移量
        content: `<div class='info'><div class='mb-10'>${this.activeAlarm.businessName}</div><div class='mb-5'>设备名称：${this.activeAlarm.name}</div><div>报警地址：${this.activeAlarm.position}</div></div>`, //设置文本标注内容
      });
    },
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}
.info {
  position: relative;
  margin: 0;
  top: 0;
  right: 0;
  min-width: 0;
  background: #fff;
  color: #000;
  padding: 10px;
}
</style>
